<!-- 审批 -->
<template>
  <div>
    <myDivider name="审批流程管理"></myDivider>

    <!-- 顶部搜索 -->
    <div class="top">
      <el-button class="add" icon="el-icon-plus" type="success"
        @click="$router.push('/examine/examineAdd?type=OneAdd')">新增</el-button>
    </div>

    <!-- 表格列表 -->
    <div class="tableBox">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column align="center" prop="unitName" label="单位">
        </el-table-column>
        <el-table-column align="center" prop="departmentName" label="部门">
        </el-table-column>
        <el-table-column align="center" prop="applicationScenarios" label="应用场景">
          <template slot-scope="scope">
            <span>
              {{ scope.row.applicationScenarios == 'notice' ? '通知公告' : 
                scope.row.applicationScenarios == 'info' ? '新闻资讯' : '入住审批'
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="创建人">
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间" width="200">
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="small" icon="el-icon-edit" @click="Preview('update', scope.row)"
              type="primary">修改</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="roomName" label="房间信息" width="200">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.roomName" placement="top-start">
              <span> {{
                scope.row.roomName.length > 8 ? '...' + scope.row.roomName.slice(scope.row.roomName.length - 8) :
                scope.row.roomName
              }}</span>
            </el-tooltip>
          </template> 
        </el-table-column> -->
      </el-table>
    </div>

    <!-- 分页器 -->
    <myPagination :pageSize="pageSize" :total="total" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>
    <!-- 所有弹窗 -->

  </div>
</template>

<script>

export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      // 分页器
      total: 1,
      pageNum: 1,
      pageSize: 10,
      userData: {}
    }
  },
  async activated() {
    this.userData = JSON.parse(sessionStorage.getItem("logOnUser"))
    this.getTableList()
  },
  deactivated() {

  },
  methods: {
    typeChange(e) {
      this.getTableList()
    },
    Preview(formName, row) { //表格按钮

      switch (formName) {
        case 'update':
          this.$router.push('/examine/examineAdd?type=update&id=' + row.id)
          break
      }
    },
    popOk(formName) { //弹窗确认接口
      switch (formName) {

      }
    },
    popClose(formName) { //弹窗取消按钮
      switch (formName) {

      }
    },
    popCloseChange(formname) { // 弹窗每次关闭时的函数
      switch (formname) {
      }
    },

    SouSuo() {
      // 如果点搜索的时候，当前页数在2的话，就会传2，数据少的时候获取第二页数据则会没有，所以需要手动改为1
      this.pageNum = 1
      this.getTableList()
    },
    pageSizeChange(e) { //分页器——每页数量变化
      this.pageSize = e
      this.getTableList()
    },
    PageChange(e) {//分页器——页数变化
      this.pageNum = e
      this.getTableList()
    },
    async getTableList() { // 获取表格列表
      let userData = JSON.parse(sessionStorage.getItem('logOnUser'))
      let res = await this.$api.contract.getapprovalProcess({
        "pageNum": this.pageNum,
        "pageSize": this.pageSize,
        "unitType": userData.unitType, //机关agency 机构company  必传
        "unitId": userData.unitId, //单位id 必传
      })
      console.log(res);
      this.total = res.data.total
      this.tableData = res.data.list
      this.tableData.forEach(el => {
        el.name = this.userData.name
      })
    },
  },
}
</script>

<style lang="less" scoped>
.width1 {
  width: 200px;
}


.top {
  width: 100%;
  padding: 20px 30px;
  box-sizing: border-box;
  position: relative;

  .htmb {
    position: absolute;
    right: 120px;
    top: 50%;
    transform: translateY(-50%);
  }

  .add {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.tableBox {
  margin-top: 50px;

  /deep/ .el-table {
    .has-gutter {
      .is-leaf {
      }
    }
  }

  .SeeDetail {
    cursor: pointer;
    font-weight: 600;
    margin-left: 10px;
  }

  .ellSpan {
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 溢出部分显示省略号 */
  }
}
</style>